<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>-webkit-filter | CtripUED Webkit CSS Library</title>
	
	<script type="text/javascript" src="base.js"></script>

<link rel="stylesheet" type="text/css" href="filter_001.css" media="all">
</head>
<body>
<div class="head">
	<div class="wrap">
		<a indepth="true" href="index.html" class="logo">CtripUED Webkit CSS Library</a>
		<div class="nav">
			<ul>
				<li><a indepth="true" href="index.html">首页</a></li>
				<li><a indepth="true" href="aboutus.html#about">关于我们</a></li>
				<li><a indepth="true" href="aboutus.html#about_box">意见反馈</a></li>
				<li><a href="http://ued.ctrip.com/">CtripUED 博客</a></li>
			</ul>
		</div>
	</div>
</div>
<div class="wrap">
	<div class="side">
		<div class="filter_box">
			<div class="field" id="catalogFilter">
				<input id="key" placeholder="属性搜索..." type="search">
			</div>
		</div>
		<div class="categorys"></div>
	</div>

	<div class="main" id="main">
		<div class="position" id="position">
			您的位置: <a indepth="true" href="index.html">首页</a> &gt; -webkit-filter
		</div>
		<!-- /position -->
		<div class="prop_intro">
			<div class="tit">
			<h1>-webkit-filter 属性</h1>
			</div>
			<div class="prop_detail">
				检索或设置对象所应用的SVG滤镜效果。<br>
				可同时提供多种效果，以空格分开。同一效果如有多组属性值，用逗号分开。目前支持十种效果。
			</div>
			<!-- /prop_detail -->
			<div class="prop_comp">
				<p>
					<i class="ico_browser ico_browser_chr"><small>18+</small></i>
					<i class="ico_browser ico_browser_saf"><small>6+</small></i>
					<i class="ico_browser ico_browser_and"><small>4.4+</small></i>
					<i class="ico_browser ico_browser_ios"><small>6.0+</small></i>
				</p>
			</div>
			<!-- /prop_comp -->

		</div>
		<!-- /prop_intro -->
		<div class="mod prop_gramm">
			<h2 class="mod_tit">语法</h2>
			<p class="mod_con">
				<strong>-webkit-filter:</strong>none | blur(&lt;number&gt;px) | brightness(&lt;percentage&gt;) | contrast(&lt;percentage&gt;) | grayscale(&lt;percentage&gt;) | hue-rotate(&lt;number&gt;deg)  | invert(&lt;percentage&gt;) | opacity(&lt;percentage&gt;) | saturate(&lt;percentage&gt;) | sepia(&lt;percentage&gt;) | drop-shadow(&lt;length①&gt; &lt;length②&gt; radius &lt;color&gt;)| url()
			</p>
		</div>
		<!-- /prop_gramm -->
		<div class="mod prop_value">
			<h2 class="mod_tit">取值</h2>
			<div class="mod_con">
				<table>
					<tbody><tr>
						<th>none</th>
						<td>无SVG滤镜效果。</td>
					</tr>
					<tr>
						<th>blur(&lt;number&gt;px)</th>
						<td>设置对象的模糊效果。</td>
					</tr>
					<tr>
						<th>brightness(&lt;percentage&gt;)</th>
						<td>设置对象的亮度。除了百分比外，也可以用非负数表达。</td>
					</tr>
					<tr>
						<th>contrast(&lt;percentage&gt;)</th>
						<td>设置对象的对比度。除了百分比外，也可以用0-1的数字表达。</td>
					</tr>
					<tr>
						<th>grayscale(&lt;percentage&gt;)</th>
						<td>设置对象的灰度。除了百分比外，也可以用0-1的数字表达。</td>
					</tr>
					<tr>
						<th>hue-rotate(&lt;number&gt;deg)</th>
						<td>设置对象的色相旋转。用0-360数字表达。</td>
					</tr>
					<tr>
						<th>invert(&lt;percentage&gt;)</th>
						<td>设置对象的反色。除了百分比外，也可以用0-1的数字表达。</td>
					</tr>
					<tr>
						<th>opacity(&lt;percentage&gt;)</th>
						<td>设置对象的透明度。除了百分比外，也可以用0-1的数字表达。</td>
					</tr>
					<tr>
						<th>saturate(&lt;percentage&gt;)</th>
						<td>设置对象的饱和度。除了百分比外，也可以用非负数表达。</td>
					</tr>
					<tr>
						<th>sepia(&lt;percentage&gt;)</th>
						<td>设置对象的褐色程度。除了百分比外，也可以用0-1的数字表达。</td>
					</tr>
					<tr>
						<th>drop-shadow(&lt;length①&gt; &lt;length②&gt; radius &lt;color&gt;)</th>
						<td>设置对象的阴影。第一个长度是向右偏移距离，第二个长度是向下偏移距离，皆可为负值，皆为必传参数；第三个是阴影圆角，可选；第四个是阴影颜色，可选。</td>
					</tr>
					<tr>
						<th>url(path.svg#a)</th>
						<td>设置对象滤镜效果。通过SVG可实现以上所有效果。SVG可写在页面里，也可外部引用。可增加锚节点。</td>
					</tr>
				</tbody></table>
			</div>
		</div>
		<!-- /prop_value -->
		<div class="mod prop_demo">
			<h2 class="mod_tit">示例</h2>
			<div class="mod_con">
				<iframe id="iframedemo" style="border: 1px solid rgb(204, 204, 204); box-sizing: border-box;" src="filter_001_1.html" width="100%" frameborder="0" height="400"></iframe>
				<div class="btns">
					<a indepth="true" href="filter_002.html" target="_top" class="btn_primary">演示</a>
				</div>

			</div>
		</div>
		<!-- /prop_demo -->
	</div>
	<!-- /main -->
</div>
<!-- /wrap -->



</body></html>
